const loginSignUpModal = document.querySelector("#signIUModal");
const closeBtn = document.querySelector("#closeBtn");
const loginFm = document.querySelector("#loginForm");
const signUpFm = document.querySelector("#signUpForm");
const forget = document.querySelector("#forget");
const gobackBtn = document.querySelector("#gobackBtn");
const userFm = document.querySelector("#userIconForm");

function showSignIUModal() {
  loginSignUpModal.style.display = "block";
}
function hideSignIUModal() {
  loginSignUpModal.style.display = "none";
}

function showLoginForm() {
  loginFm.classList.remove("dspNone");
  signUpFm.classList.add("dspNone");
  gobackBtn.classList.add("dspNone");
}

function showSignUpForm() {
  loginFm.classList.add("dspNone");
  signUpFm.classList.remove("dspNone");
  gobackBtn.classList.remove("dspNone");
}

function showUserForm(username) {
  userFm.innerText = username;
}

async function signUp() {
  try {
    let response = await fetch("http://127.0.0.1:8000/account/signup", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        username: document.querySelector("#signUpUsername").value,
        password: document.querySelector("#signUpPassword").value,
      }),
    });
    if (response.ok) {
      response = await response.json();
      let data = response.data;
      if (response.status_code === 201) {
        alert(response.message);
        showLoginForm();
      }
    } else {
      response = await response.json();
      alert("Sign up failed: " + response.detail);
    }
  } catch (error) {
    console.error("Error:", error);
    alert("An error occurred while signing up.");
  }
}

async function login() {
  username = document.querySelector("#loginUsername").value;
  password = document.querySelector("#loginPassword").value;
  try {
    let response = await fetch("http://127.0.0.1:8000/account/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        username: username,
        password: password,
      }),
    });
    if (response.ok) {
      response = await response.json();
      let data = response.data;
      if (response.status_code === 200) {
        alert(response.message);
        hideSignIUModal();
        showUserForm(data.username);
        localStorage.setItem("token", data.token);
      }
    } else {
      response = await response.json();
      alert("Login failed: " + response.detail);
    }
  } catch (error) {
    console.error("Error:", error);
    alert("A network error occurred while login.");
  }
}

async function setRole(roleToSet = "vip") {
  username = document.querySelector("#loginUsername").value;
  password = document.querySelector("#loginPassword").value;
  try {
    let token = localStorage.getItem("token") || "";
    if (!token) return new Error("Token not found");
    token = "Bearer " + token;
    let response = await fetch("http://127.0.0.1:8000/account/setrole", {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Authorization: token,
      },
      body: JSON.stringify({
        username: username,
        roleToSet: roleToSet,
      }),
    });
    if (response.ok) {
      response = await response.json();
      let data = response.data;
      if (response.status_code === 200) {
        alert(response.message);
        hideSignIUModal();
        showUserForm(data.username);
        localStorage.setItem("token", data.token);
      }
    } else {
      response = await response.json();
      alert("set role failed: " + response.detail);
    }
  } catch (error) {
    console.error("Error:", error);
    alert("A network error occurred while login.");
  }
}

async function logout() {
  try {
    let response = await fetch("http://127.0.0.1:8000/account/logout", {
      method: "POST",

      headers: {
        "Content-Type": "application/json",

        Authorization: "Bearer " + localStorage.getItem("token"),
      },
    });

    let data = await response.json();

    if (response.ok) {
      if (data.status_code === 200) {
        alert(data.message);

        showLoginForm();

        localStorage.removeItem("token");
      }
    } else {
      alert("Logout failed: " + data.detail);
    }
  } catch (error) {
    console.error("Error:", error);

    alert("An error occurred while logging out.");
  }
}
// async function getUserInfo() {
//   await fetch("http://127.0.0.1:8000/account/userinfo", {
//     method: "GET",
